@let isDrawer = dialogRef?.isDrawer;
<section
  class="tw-flex tw-w-full tw-flex-col tw-self-center tw-overflow-hidden tw-border tw-border-solid tw-border-secondary-100 tw-bg-background tw-text-main"
  [ngClass]="[
    width,
    isDrawer ? 'tw-h-full tw-border-t-0' : 'tw-rounded-t-xl md:tw-rounded-xl tw-shadow-lg',
  ]"
  cdkTrapFocus
  cdkTrapFocusAutoCapture
>
  @let showHeaderBorder = bodyHasScrolledFrom().top;
  <header
    class="tw-flex tw-justify-between tw-items-center tw-gap-4 tw-border-0 tw-border-b tw-border-solid tw-py-3 tw-ps-6 tw-pe-4"
    [ngClass]="{
      'tw-p-4 has-[[biticonbutton]]:tw-pe-2': !isDrawer,
      'tw-px-6 tw-py-4 has-[[biticonbutton]]:tw-pe-4': isDrawer,
      'tw-border-secondary-100': showHeaderBorder,
      'tw-border-transparent': !showHeaderBorder,
    }"
  >
    <h2
      bitDialogTitleContainer
      bitTypography="h3"
      noMargin
      class="tw-text-main tw-mb-0 tw-line-clamp-2 tw-text-ellipsis tw-break-words focus-visible:tw-outline-none"
      cdkFocusInitial
      tabindex="-1"
    >
      {{ title() }}
      @if (subtitle(); as subtitleText) {
        <span class="tw-text-muted tw-font-normal tw-text-sm">
          {{ subtitleText }}
        </span>
      }
      <ng-content select="[bitDialogTitle]"></ng-content>
    </h2>
    @if (!this.dialogRef?.disableClose) {
      <button
        type="button"
        bitIconButton="bwi-close"
        buttonType="main"
        size="default"
        bitDialogClose
        [label]="'close' | i18n"
      ></button>
    }
  </header>

  <div
    class="tw-relative tw-flex-1 tw-flex tw-flex-col tw-overflow-hidden"
    [ngClass]="{
      'tw-min-h-60': loading(),
      'tw-bg-background': background() === 'default',
      'tw-bg-background-alt': background() === 'alt',
    }"
  >
    @if (loading()) {
      <div class="tw-absolute tw-flex tw-size-full tw-items-center tw-justify-center">
        <bit-spinner></bit-spinner>
      </div>
    }
    <div
      cdkScrollable
      [ngClass]="{
        'tw-py-2 tw-ps-6 tw-pe-6': !disablePadding(),
        'tw-overflow-y-auto': !loading(),
        'tw-invisible tw-overflow-y-hidden': loading(),
        'tw-py-4': background() === 'alt',
      }"
    >
      <ng-content select="[bitDialogContent]"></ng-content>
      <div #scrollBottom></div>
    </div>
  </div>
  @let isScrollable = isScrollable$ | async;
  @let showFooterBorder =
    (!bodyHasScrolledFrom().top && isScrollable) || bodyHasScrolledFrom().bottom;
  <div
    class="tw-border-0 tw-border-t tw-border-solid"
    [ngClass]="{
      'tw-border-transparent': !showFooterBorder,
      'tw-border-secondary-100': showFooterBorder,
    }"
    data-chromatic="ignore"
  ></div>
  <footer
    class="tw-flex tw-flex-row tw-items-center tw-gap-2 tw-bg-background tw-py-5 tw-ps-6 tw-pe-4"
    [ngClass]="{
      'tw-px-6 tw-py-4': isDrawer,
      'tw-p-4 has-[[biticonbutton]]:tw-pe-2': !isDrawer,
    }"
  >
    <ng-content select="[bitDialogFooter]"></ng-content>
  </footer>
</section>
